<script setup lang='ts'>
  import { onMounted, reactive, ref } from 'vue';
  import { numberApi } from '@/api/controller';
  import { ElMessageBox } from 'element-plus';
  import { Toastloading, ToastSuccess, ToastWarning } from '@/utils/public';
  import Pagination from "@/components/Pagination/index.vue";
  import serachUserid from '@/components/serachUserid/index.vue';
  import xmImage from '@/components/xmImage/index.vue'
  const action = reactive({
    total:0,
    list:[] as any[],
    EquipType:[] as any[],
    playIndex:-1
  })
  const app = document.getElementById('app') as any
  const audioDom = new Audio()
  audioDom.loop = false
  audioDom.addEventListener('play', function () {
    action.list[action.playIndex].playSet = true
    app.addEventListener('click',maskClick)
  });
  audioDom.addEventListener('pause', function () {
    maskClick()
  });
  audioDom.addEventListener('ended', function () {
    maskClick()
  });
  function maskClick () {
    if(action.playIndex == -1) return
    action.list[action.playIndex].playSet = false
    action.playIndex = -1
    audioDom.pause()
    app.removeEventListener('click',maskClick)
  }
  const statusTypeList = [
    {type:0,text:'未审核'},
    {type:1,text:'审核通过'},
    {type:2,text:'审核驳回'},
  ]
  const listQuery = reactive({
    user_id:'',
    status:'',
    page: 1,
    limit: 20,
  })
  const handleFilter = ()=>{
    listQuery.page = 1
    getList()
  }
  const resetQuery = ()=>{
    Object.assign(listQuery,{
      user_id:'',
      status:'',
      page: 1,
      limit: 20,
    })
    getList()
  }
  const handleAudit = (row:any = {},status=0)=>{
    const { id=0 } = row
    if(!id || !status) return ToastWarning('审核内容信息异常')
    ElMessageBox.confirm(`确定${status==1?'审核通过':'审核驳回'}此交友广场资料吗？`, "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(async () => {
      const loading = Toastloading();
      numberApi.chatfriendChagestatus({
        id,
        status
      }).then(()=>{
        ToastSuccess(status==1?'审核通过':'驳回成功');
        loading.close();
        getList();
      }).catch(()=>{
        loading.close();
      })
    }).catch(() => {});
  }
  const handlePlayAudio = (scope:any = {})=>{
    const { $index=-1, row={} } = scope
    const { voice='', playSet=false } = row
    if(playSet) return maskClick()
    if(action.playIndex > -1) maskClick()
    if(!voice || $index < 0) return ToastWarning('播放音频参数异常')
    action.playIndex = $index
    audioDom.src = voice
    audioDom.play()
    
  }
  const getList = async()=> {
    const loading = Toastloading()
    const res = await numberApi.chatfriendList(listQuery)
    loading.close()
    const { data=[], total=0 } = res.data
    action.list = data
    action.total = total
  }
  onMounted(()=>{
    getList()
  })
</script>

<template>
  <div class="xm-content">
    <div class="xm-headTab">
      <div class="labelBox">
        <div class="labelItem">
          <div class="label">用户UUID：</div>
          <serachUserid v-model:user_id="listQuery.user_id" />
        </div>
        <div class="labelItem">
          <div class="label">审核状态：</div>
          <el-select v-model="listQuery.status" clearable placeholder="请选择审核状态">
            <el-option v-for="item in statusTypeList" :label="item.text" :value="item.type" />
          </el-select>
        </div>
        <div class="labelItem">
          <el-button type="primary" @click="handleFilter">查询</el-button>
          <el-button type="primary" @click="resetQuery">重置</el-button>
        </div>
      </div>
    </div>
    <el-table
      class="xm-main xm-TableCenter"
      :data="action.list"
      border>
      <el-table-column min-width="120" prop="user_id" label="用户ID" />
      <el-table-column min-width="120" prop="uuid" label="用户UUID" />
      <el-table-column min-width="120" prop="nickname" label="用户昵称" />
      <el-table-column min-width="120" prop="union_name" label="公会名称" />
      <el-table-column min-width="120" prop="status" label="审核状态">
        <template #default="scope">
          {{ statusTypeList.find(res=> res.type == scope.row.status)?.text || scope.row.status }}
        </template>
      </el-table-column>
      <el-table-column min-width="120" prop="sign" label="个性签名" />
      <el-table-column min-width="120" prop="chat_sign" label="快捷聊天语" />
      <el-table-column min-width="120" prop="voice" label="音频文件">
        <template #default="scope">
          <el-button type="primary" @click="handlePlayAudio(scope)">
            {{ scope.row.playSet?'暂停':'播放' }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column min-width="120" prop="image" label="头像">
        <template #default="scope">
          <xmImage
          :src="scope.row.image"
          :list="[scope.row.image]"
          />
        </template>
      </el-table-column>
      <el-table-column min-width="120" prop="created_at" label="提交时间" />
      <el-table-column width="180" fixed=right label="操作">
        <template #default="scope">
          <template v-if="scope.row.status == 0">
            <el-button type="primary" @click="handleAudit(scope.row,1)">通过</el-button>
            <el-button type="danger" @click="handleAudit(scope.row,2)">驳回</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="action.total > 0" :total="action.total" v-model:page="listQuery.page"
      v-model:limit="listQuery.limit" @pagination="getList" />
  </div>
</template>